<template>
    <div class="content">
        <el-table class="content-list" border :data="data" style="width: 100%">
            <el-table-column prop="name" label="功能名" />
            <el-table-column prop="path" label="路由路径" />
          
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                        size="small"
                        type="primary"
                        @click="handleUpdate(scope.row.id)"
                        >修改</el-button
                    >
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { storeToRefs } from "pinia";
import { useFunctionStore } from "../../../stores/function";
import { defineProps, defineEmits } from "vue";
import { url,staticUrl } from "@/services";
import { deleteFunction } from "../../../services/function";

const functionStore = useFunctionStore();
const {fetchFunction}  = functionStore;
const {updateVisible} = storeToRefs(functionStore);
const prefixUrl = ref(staticUrl);

const props = defineProps(["data"]);
const emit = defineEmits(["show"]);

async function handleUpdate(id){
    await fetchFunction(id);
    updateVisible.value = true;
}
async function handleDelete(id) {
    ElMessageBox.confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async () => {
        await deleteFunction(id);
        emit("show");
    });
}

</script>
<style>
.content {
    padding-bottom: 50px;
}
.content-list {
    /* margin-top: 25px; */
    margin-bottom: 15px;
}
</style>
